<template>
  <div class="hot-comment">
    <h5 class="hot-title">{{ title }}</h5>
    <div class="commentlist" v-for="(item,index) in data" :key="index">
      <div class="user-img">
        <img v-lazy="item.user.avatarUrl" alt="">
      </div>

      <div class="comment-info">
        <div class="comment-user">
          <span>{{ item.user.nickname }}:{{ item.content }}</span>
        </div>
        <div class="comment-desc">
          <div class="desc-l">
            <span>{{ item.timeStr }}</span>
            <span>{{ item.time | formatDate }}</span>
          </div>
          <div class="desc-r">
            <span>
              <svg t="1639475151892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21704" width="200" height="200"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="21705"></path></svg>
            </span>
            <span>{{ item.likedCount }}</span>
            <span>|</span>
            <span>
              <svg t="1639475258288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23181" width="200" height="200"><path d="M512 939.804444c-57.612929 0-113.570909-11.274343-166.322424-33.616161-50.889697-21.514343-96.504242-52.337778-135.809293-91.539394C170.666667 775.447273 139.843232 729.729293 118.328889 678.839596 96.193939 626.191515 84.816162 570.233535 84.816162 512.620606s11.274343-113.570909 33.616161-166.322424c21.514343-50.889697 52.337778-96.504242 91.539394-135.809293 39.201616-39.201616 84.919596-70.025051 135.809293-91.539394 52.648081-22.238384 108.606061-33.616162 166.322424-33.616162h1.034344l-0.103435 57.923233h-0.930909c-98.676364 0-191.353535 38.374141-261.068282 108.192323-69.818182 69.818182-108.295758 162.495354-108.295758 261.171717s38.374141 191.353535 108.192323 261.068283c69.714747 69.818182 162.495354 108.192323 261.068283 108.192323 98.572929 0 191.250101-38.374141 261.068283-108.088889C842.78303 704.077576 881.260606 611.400404 881.260606 512.827475h57.923232c0 57.612929-11.377778 113.570909-33.616161 166.21899-21.514343 50.889697-52.337778 96.504242-91.539394 135.705858s-84.919596 69.921616-135.705859 91.43596c-52.751515 22.341818-108.606061 33.616162-166.322424 33.616161zM938.149495 352.711111h-57.923232V145.73899H672.530101v-57.923232H938.149495V352.711111z m0 0" p-id="23182"></path><path d="M888.371717 96.012929l40.96 40.96L560.484848 505.806869l-40.96-40.96L888.371717 96.012929z m0 0" p-id="23183"></path></svg>
            </span>
            <span>|</span>
            <span>
              <svg t="1639475287532" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24747" width="200" height="200"><path d="M512.001024 895.995648c-32.743489 0-64.663681-2.95527-95.699135-8.093712L191.998336 1024 191.998336 797.421115C75.051158 715.310487 0 589.403291 0 448.002944 0 200.575377 229.233098 0 512.001024 0c282.769974 0 512.001024 200.575377 512.001024 448.002944C1024.002048 695.424367 794.773046 895.995648 512.001024 895.995648zM512.001024 64.004224c-247.423471 0-448.000896 171.921752-448.000896 383.99872 0 130.115844 75.696279 244.92081 191.205758 314.368629l-2.019332 148.433193 150.638893-90.546357c34.703429 7.387151 70.803598 11.743255 108.173528 11.743255 247.425519 0 448.000896-171.921752 448.000896-383.99872S759.426543 64.004224 512.001024 64.004224zM736.001472 416.000832l-448.000896 0c-17.672227 0-32.000064-14.325789-32.000064-31.998016s14.327837-32.002112 32.000064-32.002112l448.000896 0c17.672227 0 32.002112 14.329885 32.002112 32.002112S753.673699 416.000832 736.001472 416.000832zM352.000704 544.005184l320.00064 0c17.672227 0 32.000064 14.319645 32.000064 31.998016 0 17.668131-14.327837 31.991872-32.000064 31.991872l-320.00064 0c-17.674275 0-32.000064-14.323741-32.000064-31.991872C320.00064 558.324829 334.326429 544.005184 352.000704 544.005184z" p-id="24748"></path></svg>
            </span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { formatDate } from '../../../common/js/formatDate'

  export default {
    props:{
      data:Array,
      title: String      
    },

    filters:{
      formatDate(time){
        let date = new Date(time)
        return formatDate(date, 'hh:mm')
      }
    }
  }
</script>

<style scoped>
.hot-title{
  padding: 10px 0 5px 10px;
}

.commentlist{
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.user-img img{
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-right: 5px;
}
.comment-user{
  flex:1;
}

.comment-info{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.comment-desc{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.desc-r{
  font-size: 10px;
}
</style>